<template>
  <div class="invite">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="邀请好友" />
    <div class="bg-box" :style="bg">
      <div class="tips">{{tips}}</div>
      <div class="card" :style="cardBg">
        <div class="header">
          <div class="title" :style="titleBg">我的专属推广海报</div>
          <div class="point">
            <div class="point-item" v-for="(item, index) in point" :key="index">
              <div class="circle"></div>
              <div class="point-text">{{item}}</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="qrcode">
            <image :src="qrcode" mode="widthFix" />
          </div>
          <div class="content-text">扫一扫或长按识别二维码</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bg: `background-image: url(${this.$store.state.imgBaseUrl}yqm_bg@2x.png);`,
      cardBg: `background-image: url(${this.$store.state.imgBaseUrl}yqm_panel@2x.png);`,
      titleBg: `background-image: url(${this.$store.state.imgBaseUrl}yqm_panel_a@2x.png);`,
      tips:
        " 分享二维码，当有人通过你的推广二维码购买任何 咨询服务，你都会享受到服务价格的15%高额佣金 分成。 ",
      point: ["优选全国执业律师", "纠纷解决效率高", "私人暖心法律顾问"],
      qrcode: "https://s1.ax1x.com/2020/04/16/Jk7C8O.jpg"
    };
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
/deep/.header_container, /deep/.status-bar{
  background-color: transparent !important;
}
/deep/.navigationbar, /deep/.Special{
  color: #fff !important;
}
.invite {
  height: 100vh;
  background-color: #839bff;
  .bg-box {
    padding: 60rpx 0 40rpx;
    background-size: 100% 100%;
    .tips {
      padding: 10rpx 20rpx;
      margin: 0rpx 25rpx 80rpx;
      border: 1px solid #fff;
      border-radius: 30rpx;
      color: #fff;
      font-size: 30rpx;
    }
    .card {
      height: 877rpx;
      padding: 40rpx 80rpx;
      margin: 0 65rpx;
      background-size: 100% 100%;
      .header {
        .title {
          padding: 25rpx 35rpx;
          font-size: 48rpx;
          color: #6d77aa;
          font-weight: 600;
          background-size: 100% 100%;
          margin-bottom: 20rpx;
        }
        .point {
          .point-item {
            .flex();
            margin-bottom: 20rpx;
            .circle {
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              background-color: #fea388;
            }
            .point-text {
              font-size: 30rpx;
              color: @font-color;
              margin-left: 20rpx;
            }
          }
        }
      }
      .content {
        .qrcode {
          width: 60%;
          margin: 100rpx auto 50rpx;
        }
        .content-text {
          font-size: 26rpx;
          color: @font-color;
          text-align: center;
        }
      }
    }
  }
}
</style>